<template>
	<view class="wrapper">
		<view class="detailCont">
			<view class="detailBanne">
				<swiper :indicator-dots="true" :duration="1000" indicator-color="rgba(255,255,255,.5)"
					indicator-active-color="#ffffff">
					<swiper-item v-for="(v,i) in detail.imgs" :key="i">
						<view class="swiper-item">
							<image :src="v"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="detailTag">
				<view class="productName">
					{{detail.spmc}}
				</view>
				<view class="shopPrice">
					<text class="priceCode"><text class="shopCode">{{choiceSku.price}}</text>积分</text>
					<text class="shopNum">库存：{{choiceSku.stock}}</text>
				</view>
			 
			</view>
			<view class="shopComment">
				<view class="commentTit">
					<text>评价<text class="commentNum">({{list.length}})</text></text>
					<navigator :url="'/pages/commentList/commentList?id='+id" class="checkMore">查看全部 &gt;</navigator>
				</view>
				<!-- <view class="commentTag">
					<view>颜值高</view>
					<view>发货快</view>
					<view>回头客</view>
				</view> -->
				<view class="commentList">
					<u-empty text="暂无评论" v-if="list.length==0"></u-empty>
					<view class="commentSlide" v-for="(v,i) in list" :key="i">
						<view class="commentUser">
							<view class="userIcon">
								<image :src="v.userPhoto" v-if="v.userPhoto" mode="aspectFill"></image>
								<image v-else src="../../static/shouye/avatar.png" mode="aspectFill"></image>
							</view>
							<text>{{v.name}}</text>
						</view>
						<view class="commentDesc">
							{{v.content}}
						</view>
						<view class="commentPic">
							<image v-for="img in v.imgs" :src="img" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="shopParameters" v-if="detail.introduction">
				<view class="parametersTit">
					商品介绍
				</view>
				<view class="shopTable">
					<rich-text :nodes="detail.introduction"></rich-text>
					<!-- <view class="openTable">
					展开
					</view>-->
				</view>
			</view>
			<view class="shopDetailCont">
				<view class="parametersTit">
					详情
				</view>
				<view class="shopDetail">
					<rich-text :nodes="detail.description" style="font-size: 0;"></rich-text>
				</view>
			</view>
		</view>
		<view class="detailFix">
			<view class="buyCar" @click="showCar=true">
				<text>{{cart.length}}</text>
				购物车
			</view>
			<view class="detailControl">
				<view class="addCar" @click="addCar=1">
					加入购物车
				</view>
				<view class="exchangeNow" @click="addCar=2">
					立即兑换
				</view>
			</view>
		</view>
		<view class="h140"></view>
		<!--加入购物车-->
		<u-popup :show="addCar" @close="addCar=false">
			<view class="addCarfix">
				<view class="closeAddcar" @click="addCar=false"></view>
				<view class="addInfor">
					<view class="addinforTop">
						<view class="addPic">
							<image :src="choiceSku.skuImg || detail.pic" mode="aspectFill"></image>
						</view>
						<view class="addText"> 
							<view class="shopName">{{choiceSku.spmc}}</view>
							<view class="shopPrice">
								<text><text class="shopCode">{{choiceSku.price}}</text>积分</text>
								<text>库存：{{choiceSku.stock}}</text>
							</view>
											 
						</view>
						 
					</view>
					<view class="proNumControl">
						<text>兑换数量</text>
						<up-number-box integer v-model="quantity"></up-number-box>
					</view>
					<view class="productSpecifications" v-for="v in detail.attrs" :key="v.title">
						<view class="specificationsTit">
							{{v.title}}
						</view>
						<view class="specificationsList">
							<view :class="{cur:v.checked==t}" @click="xuanZhone(v,t)" v-for="(t,i) in v.values"
								:key="i">{{t}}</view>
						</view>
					</view>
					<view class="subCar" @click="openBuy">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<!--购物车-->
		<u-popup :show="showCar" @close="showCar=false">
			<view class="shopCar">
				<view class="shopcarTit">
					<text>购物车</text>
					<view class="closeShopcar" @click="showCar=false"></view>
				</view>
				<view class="carControl">
					<view>已选{{choiceCart[0].length}}件商品</view>
					<view @click="clearCart">清空选择</view>
				</view>
				<scroll-view class="carScroll" scroll-y="true">
					<view class="carList">
						<u-empty text="暂无商品" v-if="cart.length==0" margin-top="20"></u-empty>
						<view class="carSlide" v-for="v in cart" :key="v.cartId">
							<image class="proCheck " src="../../static/mall/shop_check.png" mode="widthFix" v-if="!v.checked" @click="v.checked=!v.checked"></image>
							<image class="proCheck " src="../../static/mall/shop_checked.png" mode="widthFix" v-else @click="v.checked=!v.checked"></image>
							<view class="carPic">
								<image :src="v.img" mode="aspectFill"></image>
							</view>
							<view class="carText">
								<view class="carName">
									{{v.spmc}}
								</view>
								<view class="carTag">
									{{v.specs}}
								</view>
								<view class="carNums">
									<view class="costCode">
										<text>{{v.price}}</text>积分
									</view>
									<up-number-box @change="slChange" :name="v" integer min="0"
										v-model="v.sl"></up-number-box>
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="exchangeControl">
					<view class="carCode">
						<text>{{choiceCart[1]}}</text>积分
					</view>
					<view class="exchangeButton" @click="conformCart">
						兑换（{{choiceCart[0].length}}）
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quantity: 1,
				addCar: false,
				showCar: false,
				id: '',
				detail: {
					attrs: [],
					skus: []
				},
				list: [],
				cart: [],
			}
		},
		onLoad(e) {
			this.id = e.spid
			this.getDetail()
			this.getEvaluations()
			this.getCart()
		},
		computed: {
			choiceSku() {
				let list = [],
					obj = {}

				this.detail.attrs.forEach(v => {
					list.push(v.checked)
				})
				list = list.join(',')
				if(list){
					this.detail.skus.forEach(v => {
						if (list == v.specs) {
							obj = v
						}
					})
				}else{
					obj = this.detail.skus[0]
				}
				
				return obj
			},
			choiceCart() {
				let total = 0
				let cart = this.cart.filter(v => {
					if (v.checked) {
						total += v.price * v.sl
					}
					return v.checked
				})

				return [cart, total]
			}
		},
		methods: {

			// 选择规格
			xuanZhone(v, t) {
				v.checked = t
			},
			//添加到购物车
			addCart() {
				this.$http('/api/cart/add?token=' + uni.getStorageSync('uInfo').token, {
					spid: this.id,
					sl: this.quantity,
					skuid: this.choiceSku.skuid
				}, true, 'POST').then((r) => {
					this.sToast('加入成功')
					this.getCart()
					this.addCar = false
				})
			},
			//商品详情
			getDetail() {

				this.$http('/api/goods/detail', {
					spid: this.id
				}).then((r) => {
					console.log(r.data)
					r.data.attrs = r.data.attrs.map(m => {
						m.checked = m.values[0]
						return m
					})
					this.detail = r.data
					
					const regex = new RegExp('img', 'gi')
					// console.log("this.detail.description"+this.detail.description)
					this.detail.description = this.detail.description.replaceAll(regex,`img style="max-width:100%;"`)
					this.detail.description = this.detail.description.replaceAll(`<figure class="image">`,`<p>`);
					this.detail.description = this.detail.description.replaceAll(`</figure>`,`</p>`);	 
					// console.log("this.detail.description"+this.detail.description)
				})
			},
			// 查询商品评价列表
			getEvaluations() {
				this.$http('/api/goods/evaluations', {
					spid: this.id
				}).then((r) => {
					console.log(r)
					this.list = r.data.slice(0, 5)
				})
			},
			// 我的购物车
			getCart() {
					this.userInfo = uni.getStorageSync('uInfo')
							if (this.userInfo) {
							 
							} else {
								uni.navigateTo({
									url: '/pages/dengLu/dengLu'
								})
								return;
							}
							
				this.$http('/api/cart/list').then((r) => {

					this.cart = r.data
				})
			},
			// 购物车数量变动
			slChange(e) {
				console.log(e)
				const {
					value,
					name
				} = e
				if (value >= 1) {
					// 更新购物车数量
					this.$http('/api/cart/add?token=' + uni.getStorageSync('uInfo').token, {
						spid: name.spid,
						sl: value,
						skuid: name.skuid
					}, true, 'POST').then((r) => {

					})
				} else {
					// 删除购物车
					this.$http('/api/cart/delele?token=' + uni.getStorageSync('uInfo').token + '&cartId=' + name.cartId, {
						cartId: name.cartId
					}, true, 'POST').then((r) => {
						this.getCart()
					})
				}
			},
			// 清空选择
			clearCart() {
				this.cart = this.cart.map(r => {
					r.checked = false
					return r
				})
			},
			openBuy() {
				if (this.addCar == 1) {
					// 加入购物车
					this.addCart()
				} else if (this.addCar == 2) {
					// 立即下单
					uni.setStorageSync('good', [{
						...this.choiceSku,
						sl: this.quantity
					}])
					this.openPage('/pages/exchange/exchange')
				}
			},
			conformCart() {
				if (this.choiceCart[0].length == 0) {
					this.sToast('请选择要结算的商品')
					return
				}
				// 购物车下单
				uni.setStorageSync('good', this.choiceCart[0])
				this.openPage('/pages/exchange/exchange')
			}
		}
	}
</script>

<style lang="scss">
	.commentPic {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20rpx 20rpx;
		margin-top: 18rpx;

		image {
			width: 190rpx;
			height: 190rpx;
			overflow: hidden;
			border-radius: 12rpx;
		}
	}

	/*购物车*/
	.shopCar {

		z-index: 20;
		background: #ffffff;
		border-radius: 12rpx 12rpx 0 0;
		padding: 30rpx;
		width: 100%;

		.exchangeControl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60rpx;

			.carCode {
				color: rgba(255, 85, 85, 1);
				font-size: 20rpx;

				text {
					margin-right: 12rpx;
					font-size: 40rpx;
				}
			}

			.exchangeButton {
				width: 240rpx;
				background: linear-gradient(90deg, rgba(255, 137, 1, 1) 0%, rgba(255, 83, 37, 1) 100%);
				text-align: center;
				border-radius: 80rpx;
				color: #ffffff;
				line-height: 80rpx;
				font-size: 28rpx;
			}
		}

		.shopcarTit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			text {
				font-size: 40rpx;
				line-height: 44rpx;
			}

			.closeShopcar {
				background: url(/static/mall/shop_closeCar.png) center no-repeat;
				background-size: 100% auto;
				width: 30rpx;
				height: 30rpx;
			}
		}

		.carControl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;

			view {
				font-size: 32rpx;
				line-height: 44rpx;
			}
		}

		.carScroll {
			max-height: 760rpx;
			box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
			border-radius: 12rpx;
		}

		.carList {

			padding: 30rpx;

			box-sizing: border-box;
			overflow: hidden;

			.carSlide {
				display: flex;

				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.proCheck {
					width: 30rpx;
					height: 30rpx;
					// background: url(/static/mall/shop_check.png) center no-repeat;
					// background-size: 100% auto;

					// &.cur {
					// 	background: url(/static/mall/shop_checked.png) center no-repeat;
					// 	background-size: 100% auto;
					// }
				}

				.carPic {
					margin: 0 28rpx 0 20rpx;
					width: 190rpx;
					height: 190rpx;
					border-radius: 6px;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.carText {
					flex: 1;

					.carName {
						font-size: 30rpx;
						line-height: 44rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.carTag {
						margin-top: 10rpx;
						font-size: 26rpx;
						color: rgba(169, 169, 169, 1);
						line-height: 44rpx;
						margin-bottom: 10rpx;
					}

					.carNums {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.costCode {
							font-size: 20rpx;
							color: rgba(255, 85, 85, 1);

							text {
								margin-right: 12rpx;
								font-size: 28rpx;
							}
						}
					}
				}
			}

		}
	}

	.detailCont {
		padding: 30rpx 32rpx;
	}

	.detailBanne image {
		width: 100%;
		height:100vw;
	}

	.detailBanne swiper {
		height: 100vw;
		overflow: hidden;
		border-radius: 6px;
	}

	.detailTag {
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
		margin-top: 30rpx;
		padding: 40rpx 28rpx 0;

		.productName {
			font-size: 40rpx;
			line-height: 52rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			margin-bottom: 30rpx;
		}

		.shopPrice {
			padding-bottom: 27rpx;
			border-bottom: 1px dashed rgb(219, 219, 219);
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.priceCode {
				font-size: 24rpx;
				color: rgba(255, 85, 85, 1);

				.shopCode {
					font-size: 52rpx;
					margin-right: 10rpx;
				}
			}

			.shopNum {
				color: rgba(155, 155, 155, 1);
				font-size: 24rpx;
			}
		}

		.proNotice {
			background: url(/static/mall/shop_nosupport.png) left center no-repeat;
			background-size: 30rpx auto;
			font-size: 28rpx;
			line-height: 48rpx;
			padding: 30rpx 0 30rpx 40rpx;
		}
	}

	.shopComment {
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
		margin-top: 30rpx;
		padding: 24rpx 28rpx 20rpx;

		.commentTit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 48rpx;
			margin-bottom: 20rpx;

			text {
				font-size: 30rpx;
				color: rgba(51, 51, 51, 1);

				.commentNum {
					margin-left: 10rpx;
				}
			}

			.checkMore {
				font-size: 24rpx;
				color: rgba(151, 151, 151, 1);
			}
		}
	}

	.commentTag {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 30rpx;

		view {
			padding: 16rpx;
			background: rgba(245, 245, 245, 1);
			border-radius: 6px;
			font-size: 28rpx;
			color: rgba(52, 52, 52, 1);
		}
	}

	.commentUser {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 10rpx;

		.userIcon {
			border-radius: 50%;
			overflow: hidden;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
		}

		text {
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
		}
	}

	.commentDesc {
		font-size: 30rpx;
		line-height: 48rpx;
		color: rgba(51, 51, 51, 1);
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}

	.commentSlide {
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgba(151, 151, 151, .15);
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
			border: none;
		}
	}

	.shopParameters {
		padding: 24rpx 28rpx 0;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
		margin-top: 30rpx;

		.parametersTit {
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 48rpx;
			margin-bottom: 30rpx;
		}
	}

	.shopTable {
		border-top: 1px solid rgba(151, 151, 151, .15);

		.tableRow {
			display: flex;

			.tableTh {
				background: rgba(239, 239, 239, 1);
				color: rgba(51, 51, 51, 1);
				font-size: 26rpx;
				border-bottom: 1px solid rgba(151, 151, 151, .15);
				width: 154rpx;
				text-indent: 10rpx;
				line-height: 1.5;
				padding: 10rpx 0;
			}

			.tableTd {
				color: rgba(51, 51, 51, 1);
				font-size: 26rpx;
				border-bottom: 1px solid rgba(151, 151, 151, .15);
				flex: 1;
				text-indent: 20rpx;
				line-height: 1.5;
				padding: 10rpx 0;
			}
		}
	}

	.openTable {
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 68rpx;
		font-size: 26rpx;
		color: rgba(155, 155, 155, 1);
		gap: 12rpx;

		view {
			background: url(/static/mall/shop_mallArr.png) center no-repeat;
			width: 20rpx;
			height: 20rpx;
			background-size: 100% auto;
		}
	}

	.shopDetailCont {
		padding: 24rpx 28rpx;
		border-radius: 6px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 15px rgba(230, 230, 230, 1);
		margin-top: 30rpx;

		.parametersTit {
			font-size: 30rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 48rpx;
			margin-bottom: 30rpx;
		}

		.shopDetail {
			image {
				width: 100%;
				height: auto;
			}
		}
	}

	.detailFix {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 5;
		width: 100%;
		height: 140rpx;
		border-radius: 6px 6px 0 0;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 96rpx;
		padding: 0 40rpx;
	}

	.buyCar {
		background: url(/static/mall/shop_car.png) center top no-repeat;
		background-size: 32rpx auto;
		padding-top: 40rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		color: rgba(48, 49, 51, 1);
		position: relative;

		text {
			display: flex;
			position: absolute;
			background: rgba(252, 56, 80, 1);
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			justify-content: center;
			align-items: center;
			top: 0;
			right: 12rpx;
			font-size: 16rpx;
			color: #ffffff;
		}
	}

	.detailControl {
		display: flex;
		gap: 24rpx;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 28rpx;
			font-size: 28rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}

		.addCar {
			background: rgba(255, 207, 77, 1);
			color: rgba(48, 49, 51, 1);
		}

		.exchangeNow {
			background: linear-gradient(to right, rgba(255, 137, 1, 1), rgba(255, 83, 37, 1));
			color: #ffffff;
		}
	}

	.h140 {
		height: 140rpx;
	}

	/*加入购物车*/
	.addCarfix {

		z-index: 20;
		background: #ffffff;
		border-radius: 12rpx 12rpx 0 0;
		padding: 82rpx 30rpx 30rpx;

		.closeAddcar {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			background: url(/static/mall/shop_closeCar.png) center no-repeat;
			background-size: 100% auto;
			width: 30rpx;
			height: 30rpx;
		}

		.addinforTop {
			display: flex;
			justify-content: space-between;
			gap: 20rpx;

			.addPic {
				width: 190rpx;
				height: 190rpx;
				overflow: hidden;
				border-radius: 6px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.addText {
				word-break: break-all;
				flex: 1;
				font-size: 30rpx;
				line-height: 44rpx;
				
				.shopName {
					font-size: 30rpx;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-bottom: 20rpx;
				}
				
				.shopPrice {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: rgba(155, 155, 155, 1);
				
					text:nth-child(1) {
						font-size: 20rpx;
						color: rgba(255, 85, 85, 1);
					}
				
					.shopCode {
						margin-right: 8rpx;
						font-size: 28rpx !important;
					}
				}
			}
		}

		.proNumControl {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid rgba(151, 151, 151, .15);


		}

		.specificationsTit {
			font-size: 30rpx;
			line-height: 44rpx;
			margin: 40rpx 0 20rpx;
		}

		.specificationsList {
			display: flex;
			gap: 30rpx 30rpx;
			flex-wrap: wrap;

			view {
				font-size: 26rpx;
				line-height: 28rpx;
				padding: 16rpx 8rpx;
				background: rgba(245, 245, 245, 1);
				border-radius: 4px;
				min-width: 192rpx;
				box-sizing: border-box;
				text-align: center;
			}

			.cur {
				background: rgba(255, 244, 240, 1);
				color: rgba(255, 91, 32, 1);
			}

			.noClick {
				background: rgba(245, 245, 245, 1);
				color: rgba(219, 219, 219, 1);
			}
		}

		.subCar {
			opacity: 1;
			border-radius: 40rpx;
			background: linear-gradient(90deg, rgba(255, 137, 1, 1) 0%, rgba(255, 83, 37, 1) 100%);
			line-height: 80rpx;
			color: #ffffff;
			margin-top: 52rpx;
			text-align: center;
			font-size: 36rpx;
		}
	}
</style>